<template>
  <el-dialog @close="close" v-model="dialogFormVisible" :title="title">
    <el-form ref="dialogForm" :model="dialogFormData">
      <el-form-item>
        <slot name="upload"></slot>
      </el-form-item>
      
      <el-form-item :prop="(k+'.value')" :rules="{required:true,trigger:'blur',message:v.label+'不能为空'}" v-for="(v,k) in dialogFormData" :key="k" :label="v.label" :label-width="formLabelWidth">
        <el-input v-model="v.value" autocomplete="off" />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="cencel">取消</el-button>
        <el-button @click="confirm(dialogForm)" type="primary">
          确定
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script setup>
import {ref,watchEffect,toRefs} from "vue"
//想法
//1.根据传入的数据，自动创建出from表单元素，现在默认使用inpu
//2.表单需要具备能够检验属性的功能
//3.表单通过和不通过，可以回调对应的方法
//4.控制显示隐藏的属性
//5,控制labelWidth的属性
//声明props

//dialog使用说明
//属性：
//1.visible:Boolean
//2.dialogFormData:Object 表单的数据{name:{lable:"item的描述",value:"对应的值"}}
//3.fromLabelWidth:String label的宽度
//4.title:String dialog的标题

//事件：
//validateSuccess 点击确定按钮，表单校验通过之后触发，回传一个 form实例引用
//dialogCancel  点击取消按钮 触发的事件
//clsed dialog被关闭的时候触发的事件
let props=defineProps({
  //dialog标题
  title:{
      type:String,
      default(){
         return "增加学生信息"
      }
  },
    //控制表单显示隐藏的
    visible:{
        type:Boolean,
        default(){
            return false
        }
    },
    //弹窗表格中的数据来源
    dialogFormData:{
        type:Object,
        default(){
            return []
        }
    },
    formLabelWidth:{
        type:String,
        default(){
            return '140px'
        }
    },
})
//声明表单校验通过之后的回调
let emits=defineEmits('validateSuccess','dialogCancel','closed')
//dialogFromVisible的初始值，定义为传递下来的初始值
let dialogFormVisible=ref(false)
//使用watchEffect侦听visible props的变化
let {visible}=toRefs(props)
//实时侦听visible props的变化，控制dialog的显示或者隐藏
watchEffect(()=>{
   dialogFormVisible.value=visible.value
})
//点击取消
let cencel=()=>{
 
    emits('dialogCancel')
}
//点击确定
//声明一个ref引用dialog的结构
let dialogForm=ref()
let confirm=(form)=>{
   form.validate(valid=>{
      if(valid){
        //表单校验通过
        emits('validateSuccess',dialogForm)
      }else{
        //表单校验不通过
      }
   })
}
//dialog被关闭的时候触发的事件
let close=()=>{
    emits('closed')
}
</script>